<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            width: 600px;
            height: 300px;
            text-align: center;
        }
        table thead{
            height: 60px;
        }
    </style>
    <script src="./jquery.js"></script>
    <script>
        $(function(){
            /*1、隔行换色*/
            $('table tbody tr:even').css({'background-color':'lightblue'})
            $('table tbody tr:odd').css({'background-color':'lightcyan'})
            /*
                注意：                
                :nth-of-type(even)选中偶数项，jQuery语法为:even
                :nth-of-type(odd)选中奇数项，jQuery语法为:odd，
                注意：jQuery中的index值从 0 开始，所有第一个元素是偶数 (0)
            */
            $('table thead tr').css({'background-color':'#4de2e2'})

            /*2、全选与全不选*/
            $('input[name="all"]').on('click',function(){
                /**
                 * 注意：prop()与attr()区别
                 *  attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数
                 *  在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数
                 *  对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，两个的返回结果一样都是Boolean类型
                 *  但是从1.6开始，使用attr()获取这些属性的返回值为String类型
                 * 案例：
                 *     <input id="chk1" type="checkbox" />是否可见
                 *     <input id="chk2" type="checkbox" checked="checked" />是否可见
                 * 像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，
                 * 这些属于固有属性，因此建议使用prop方法去操作，而attr方法建议结合自定义的DOM属性时使用
                 * 1）props语法
                 *     $("#chk1").prop("checked") == false
                 *     $("#chk2").prop("checked") == true
                 * 2）attr语法
                 *     $("#chk1").attr("checked") == undefined
                 *     $("#chk2").attr("checked") == "checked"
                 * 
                */
                $('input[name="item"]').prop("checked",$(this).prop('checked'))
            })
            /**
             * 当所有【子复选框按钮】点击选中后，【全选按钮】自动勾选为选中状态。
             * 当某个【子复选框按钮】点击取消选中后，【全选按钮】自动取消勾选状态。
            */
            $('input[name="item"]').on('click',function(){
                let nocheckedList = $('input[name="item"]').not(":checked");
                if (nocheckedList.length == 0) {
                    $("input[name='all']").prop('checked', true)
                }else{
                    $("input[name='all']").prop('checked', false)
                }
            })
        })
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th><input type="checkbox" name="all" id=""></th>
                <th>商品（名称）</th>
                <th>单价（￥）</th>
                <th>数量（台）</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>vivo</td>
                <td>3000</td>
                <td>4</td>
                <td>12000</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item" id=""></td>
                <td>华为</td>
                <td>5000</td>
                <td>2</td>
                <td>10000</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item" id=""></td>
                <td>小米</td>
                <td>4000</td>
                <td>3</td>
                <td>12000</td>
            </tr>
            <tr>
                <td colspan="4">总价：</td>
                <td>9000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>